import 'package:flutter/material.dart';
import '../common/Constants.dart';
import '../model/TextModel.dart';
import 'EssayListPage.dart';
import 'dart:convert';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class TextPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextState();
  }
}

class TextState extends State<TextPage> {
  List<dynamic> data = [];

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff313131),
          title: Text("文字"),
        ),
        body: Padding(
            padding: EdgeInsets.all(3.5),
            child: StaggeredGridView.countBuilder(
                // 2列
                crossAxisCount: 2,
                itemCount: data.length,
                mainAxisSpacing: 1,
                crossAxisSpacing: 1,
                // 跨列的逻辑
                staggeredTileBuilder: (int index) => new StaggeredTile.count(
                    index == 0 || index == data.length - 1 ? 2 : 1, 1),
                itemBuilder: (BuildContext context, int index) =>
                    GestureDetector(
                      onTap: () {
                        Navigator.push(context, MaterialPageRoute(builder: (context) =>
                            EssayListPage(title: (data[index] as TextItem).title, tag: (data[index] as TextItem).id)));
                      },
                        child: Card(
                            child: Stack(
                      children: <Widget>[
                        ConstrainedBox(
                            constraints: new BoxConstraints.expand(),
                            child: FadeInImage.assetNetwork(
                              placeholder: Constants.LOCAL_BIG_IMAGE,
                              image: (data[index] as TextItem).thumbnail,
                              fit: BoxFit.cover,)
                            ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              (data[index] as TextItem).title,
                              style:
                                  TextStyle(fontSize: 18, color: Colors.white),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  width: 15,
                                  margin: EdgeInsets.only(right: 5),
                                  child: Divider(
                                      height: 2, color: Color(0xffffffff)),
                                ),
                                Text((data[index] as TextItem).sign,
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 15)),
                                Container(
                                    width: 15,
                                    height: 2,
                                    margin: EdgeInsets.only(left: 5),
                                    child: Divider(
                                        height: 2, color: Color(0xffffffff)))
                              ],
                            )
                          ],
                        )
                      ],
                    ))))));
  }

  void getData() async {
    var str = await DefaultAssetBundle.of(context)
        .loadString("json/CharacterData.json");
    TextModel model = TextModel.fromJson(json.decode(str));
    setState(() {
      data = model.datas.list;
      print("data: ${(data[0] as TextItem).thumbnail}");
    });
  }
}
